<template>
  <el-dialog title="打印信息" width="80%" height="800px" :visible.sync="outerVisible" :close-on-click-modal="false" @close="close">
    <json-viewer
        :value="text"
        :expand-depth="30"
        copyable
        boxed
        sort
        style="text-align: left"
    ></json-viewer>
  </el-dialog>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import Vue from "vue"
Vue.use(JsonViewer)
export default {
  name: "MsgForm",
  props: {
    diaVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: [Object],
      default: function () {
        return {}
      }
    }
  },
  data: function () {
    return {
      outerVisible: false,
      text: ''
    }
  },
  watch: {
    diaVisible(val) {
      if (val) {
        this.outerVisible = true
      }
    },
    info() {

      this.text = '{}'
      try {
        let info = this.info._id ? JSON.parse(JSON.stringify(this.info)) : {}
        if (this.info && this.info._id) {
          info.msg = info.msg ? JSON.parse(info.msg) : ''
          info.print_result = info.print_result ? JSON.parse(info.print_result) : ''
          this.text =  info
        }
      } catch (e) {
        this.text = ''
      }
    }
  },
  methods: {
    close() {
      this.outerVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

</style>
